<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="hotelName" placeholder="酒店名称" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="hotelLevel" clearable placeholder="酒店星级">
          <el-option value="0" label="查询所有" />
          <el-option value="3" label="三星级酒店" />
          <el-option value="4" label="四星级酒店" />
          <el-option value="5" label="五星级酒店" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getHotel()">查询</el-button>
      </el-form-item>
    </el-form>



    <el-table
      v-loading="listLoading"
      :data="hotelList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="酒店名称"  prop="itripHotel.hotelName">
      </el-table-column>
      <el-table-column align="center" label="酒店星级"  prop="itripHotel.hotelLevel">
      </el-table-column>
      

       <el-table-column align="center" label="操作" >
        <template slot-scope="scope">
          <router-link :to="'/hotel/editHotel/'+scope.row.itripHotel.id">
           <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
          >修改</el-button>
          </router-link>


           <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="removeById(scope.row.itripHotel.id)"
          >删除</el-button>
        </template>

        
      </el-table-column>
   </el-table>
   <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20]"
      style="padding: 30px 0; text-align: center"
      layout="sizes, prev, pager, next, jumper, ->, total"
      @current-change="changeCurrentPage"
      @size-change="changePageSize"
    />
  </div>
</template>

<script>
export default {
 data() {
    return {
      hotelList: [],
      listLoading: true,
      url:"http://localhost:8081/hotel/itrip-hotel/selectHotelByPage",
      page:1,
      limit:5,
      total:0,
      hotelName:'',
      hotelLevel:''
    }
  },
  created() {
    this.getHotel();
  },
  methods: {
    
    getHotel(form){

        this.listLoading = true
        this.axios.get(this.url,{params:{
            page:this.page,
            limit:this.limit,
            hotelName:this.hotelName,
            hotelLevel:this.hotelLevel
            
        }}).then(res=>{
           
            console.log(res.data.data.hotelBeans)
            this.total=res.data.data.total;
            this.hotelList=res.data.data.hotelBeans;
            
            this.listLoading = false
        })
    },
    removeById(id){
     
    },
    changeCurrentPage(page){
        this.page=page;
        this.getHotel();
    },
    changePageSize(size){
        this.limit=size;
        this.getHotel();
    }
  }
}
</script>

<style>

</style>